<template>
  <div>
    <VBg/>
    <div class="temp2-main">
      <VHead :classInfo="classInfo" :schoolLogo="schoolLogo" :dreamHorse="dreamHorse" :beautifulStars="beautifulStars" />
      <div class="m-center">
        <div class="m-box">
          <IndexCont
            :is-show="currentView==='Index'"
            :rule-event-list="ruleEventList"
            :class-target="classTarget"
            :class-info="classInfo"
            :class-profile="classProfile"
            :class-committee="classCommittee"
            :sign-info="signInfo"
            :rule-perf="rulePerf"
            :duty-info="dutyInfo"
            :curriculums="curriculums"
            :adonises="adonises"
            :data-a-s-t-m="dataASTM"
            @goList="onGoList"
          />

          <VList :isShow="currentView==='List'" ref="vList" @goIndex="currentView='Index'" @goArticle="d=>{currentView='Article';$refs.vArticle.loadData(d)}"></VList>

          <VArticle :isShow="currentView==='Article'" ref="vArticle" @goIndex="currentView='Index'" @goList="type=>{currentView='List';$refs.vList.loadData(type)}"></VArticle>
        </div>
      </div>
      <VFooter/>
    </div>
  </div>
</template>

<script>
import VBg from '@/components/temp5/VBg'
import VHead from '@/components/temp5/Head'
import VFooter from '@/components/temp4/Footer'
import ajaxApi from '@/modules/ajax-api'
// import IndexCont from '@/components/temp5/index-cont'
import IndexCont from './index-cont'
import VList from '@/components/temp4/VList'
import VArticle from '@/components/temp4/VArticle'
import Timer from '@/modules/corejs/time/time-down.js'
export default {
  data () {
    return {
      currentView: 'Index',

      classTarget: {},
      classInfo: {},
      schoolLogo: {},
      dreamHorse: {},
      beautifulStars: [],

      classProfile: {},
      classCommittee: [],

      signInfo: {},
      rulePerf: [],
      dutyInfo: {},
      curriculums: {},
      adonises: {},
      dataASTM: {},

      ruleEventList: []
    }
  },
  components: {
    VBg,
    VHead,
    VFooter,
    IndexCont,
    VList,
    VArticle
  },
  created () {
    this.timer = new Timer()
    // 没有设备码将不进行数据加载
    if (ajaxApi.equipmentCode) {
      this.loadData()
    }
  },
  beforeRouteUpdate (to, from, next) {
    if (to.query.reload) {
      this.loadData()
    }
    next()
  },
  methods: {
    onGoList (type) {
      this.currentView = 'List'
      this.$refs.vList.loadData(type)
    },
    loadData () {
      // 清空。目前没必要
      // 设备码与班级绑定后，就不会轻易发生更改
      // 即使发生，也将重新加载页面
      // 所以下次请求可直接拿来用
      // ajaxApi.classId = null

      ajaxApi.getClassRuleEventList().then(data => {
        if (!data) return []
        let list = data.class_rule_event_list
        this.ruleEventList = list.map(item => {
          return {
            class_name: data.class_name,
            grade_name: data.grade_name,
            rule_item_name: item.rule_item_name,
            score: item.score,
            time: item.event_date.slice(5, item.event_date.length),
            user_name: item.user_name
          }
        })
      })
      ajaxApi.getClassTarget().then(data => {
        if (!data) return {}
        this.classTarget = data.data
      })
      ajaxApi.getClassInfo().then(data => {
        this.classInfo = data.class_info || {}
        this.classCommittee = data.class_committee
      })
      ajaxApi.getSchoolLogo().then(data => {
        this.schoolLogo = data.data || {}
      })
      ajaxApi.getDreamHorse().then(data => {
        this.dreamHorse = data.data[0] || {}
      })
      // ajaxApi.getBeautifulStars().then(data => {
      //   this.beautifulStars = data.data
      // })
      ajaxApi.getClassProfile().then(data => {
        this.classProfile = data.data
      })

      // 今日签到
      ajaxApi.getSignInfo().then(data => {
        this.signInfo = data
      })
      // 今日表现
      ajaxApi.getClassRulePerf().then(data => {
        this.rulePerf = data.data
      })
      // 今日值日
      ajaxApi.getDutyInfo().then(data => {
        this.dutyInfo = data.data
      })
      // 今日明日课表
      ajaxApi.getCurriculums().then(data => {
        this.curriculums = data.data
      })
      // 班级美少年
      ajaxApi.getAdonises().then(data => {
        this.adonises = data
      })
      // 特色活动、主题班会、安全教育、微阅读
      ajaxApi.getASTM().then(data => {
        this.dataASTM = data
      })
    }
  },
  watch: {
    currentView (name) {
      // 10 分钟后返回 Index
      let {timer} = this
      if (name === 'Index') {
        timer.stop()
      } else {
        timer.start(() => {
          this.currentView = 'Index'
        }, 600000)
      }
    }
  }
}
</script>
<style scoped>
.temp2-main {
  width: 1080px;
  height: 1920px;
  margin: 0 auto;
  position: relative;
}

.m-center {
  clear: both;
  width: 940px;
  height: 1446px;
  background-image: url(@/components/temp5/imgs/back02.png);
  background-size: 100% 100%;
  margin-left: 40px;
  padding: 50px 30px;
}
.m-box {
  width: 940px;
  height: 1448px;
  background-color: #fff;
  border-radius: 20px;
  position: relative;
}

.temp4-list /deep/ .buttons button,
.temp4-article /deep/ .buttons button {
  background-color: rgba(80, 206, 129, 0.8);
}
</style>
